<template>
    <div class="player-container">
        <w-player class="player" :key="playerKey" :options="options"></w-player>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineProps, onBeforeMount, watch } from 'vue';
import useHls from '@/hooks/hls';
import { WPlayer } from 'vue-wplayer';
import 'vue-wplayer/dist/style.css';
import { optionsType, qualityType } from '@/types/player';
import { danmakuType } from "@/types/danmaku";
import { getDanmakuAPI, sendDanmakuAPI } from '@/api/danmaku';

const props = withDefaults(defineProps<{
    vid: number,
    resources: Array<any>,
    part: number
}>(), {
    part: 1
})

const { loadHls } = useHls();
const playerKey = ref(0);

const options = reactive<optionsType>({
    resource: [],
    type: "hls",
    customType: (player, src) => {
        loadHls(src, player);
    },
    theme: "#18a058",
    danmaku: {
        open: true,
        data: [],
        send: (danmaku) => {
            sendDanmaku(danmaku);
        }
    }
});

const loadPart = async (part: number) => {
    loadResource(part);
    await getDanmaku(part);

    playerKey.value = Date.now();
}

const loadResource = (part: number) => {
    let tmpResource: qualityType | string = {};
    if (props.resources[part - 1]["original"]) {
        tmpResource = props.resources[part - 1]["original"];
    } else {
        for (let key of Object.keys(props.resources[part - 1])) {
            const reg = /res(\d+)/g;
            const matchArr = reg.exec(key);
            if (matchArr && matchArr[1]) {
                console.log('matchArr', matchArr)
                tmpResource[parseInt(matchArr[1])] = {
                    name: `${matchArr[1]}P`,
                    url: props.resources[part - 1][key],
                }
            }
        }
    }
    options.resource = tmpResource;
}


const sendDanmaku = (danmakuForm: danmakuType) => {
    danmakuForm.vid = props.vid;
    danmakuForm.part = props.part;
    sendDanmakuAPI(danmakuForm);
}

const getDanmaku = async (part: number) => {
    if (options.danmaku?.data) options.danmaku.data = [];
    const res = await getDanmakuAPI(props.vid, part);
    if (res.data.code === 2000) {
        const list = res.data.data.danmaku;
        if (list) {
            options.danmaku!.data = list;
        }
    }
}

watch(() => props.part, (val) => {
    loadPart(val);
});

onBeforeMount(() => {
    loadPart(props.part);
});
</script>

<style lang="less" scoped>
.player-container {
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
    margin-bottom: 40px;

    .player {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: black;
    }
}
</style>